<template>
    <a-modal :title="formTile + '分组'" :visible="true" width="60%" :footer="null" @cancel="reset">
      <a-card>
        <a-row type="flex" justify="start" align="top">
          <a-col :span="24">
            <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
              <a-form-item label="敏感词" :required="true">
                <a-input
                  placeholder="请输入敏感词"
                  :maxLength="15"
                  allow-clear
                  v-decorator="[
                    `sensitiveWord`,
                    {
                      validateTrigger: ['change', 'blur'],
                      rules: [
                        {
                          required: true,
                          whitespace: true,
                          message: '请输入敏感词'
                        }
                      ]
                    }
                  ]"
                />
              </a-form-item>
              <a-row>
                <a-col :span="16" :offset="8" class="info-action">
                  <a-button type="primary" @click="reset">返回</a-button>
                  <a-button type="primary" class="ml-20" html-type="submit" :loading="loading">保存</a-button>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </a-modal>
  </template>
  
  <script>
  import { createSensitiveword, updateSensitiveword } from '@api/pattern/index.js'
  import { isTrue } from '../util/utils.js'
  export default {
    props: {
      group: {
        type: Object,
        default: null
      }
    },
  
    data() {
      return {
        loading: false,
        formItemLayout: {
          labelCol: {
            xl: { span: 5 },
            xs: { span: 5 },
            sm: { span: 6 }
          },
          wrapperCol: {
            xl: { span: 8 },
            xs: { span: 12 },
            sm: { span: 12 }
          }
        },
        formTile: '新增'
      }
    },
  
    computed:{
      jobNumber(){
        return this.$store.getters.userInfo.workNo || ''
      }
    },
  
    beforeCreate() {
      this.form = this.$form.createForm(this, { name: 'group'})
    },
  
    created() {
      const { group } = this.$props
      if (isTrue(group)) {
        this.formTile = '编辑'
        this.$nextTick(() => {
          this.form.setFieldsValue({ sensitiveWord: group.sensitiveWord})
        })
      }
    },
  
    methods: {
      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          console.log(err, values)
          if (!err) {
            this.submit(values)
          }
        })
      },
      async submit(values) {
        try {
          this.loading = true
          const { group,jobNumber } = this
          const isEdit = isTrue(group)
          values.jobNumber = jobNumber
          if (isEdit) {
            values.sensitiveWordId = group.sensitiveWordId
          }
          const res =  isEdit ? await updateSensitiveword(values) : await createSensitiveword(values)
          if (res.code == 200) {
            let text = isEdit ? '编辑成功' : '新增成功'
            this.$message.success(text)
            this.reset()
          } else {
            this.$message.error(res.msg || res.message)
          }
        } catch (error) {
          this.loading = false
          console.log(error)
        }
      },
      reset() {
        this.form.resetFields()
        this.loading = false
        this.$emit('close')
      }
    }
  };
  </script>
  <style scoped lang="less">
  .info-action {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    // margin-bottom: 20px;
  }
  .ml-20 {
    margin-left: 20px;
  }
  
  </style>
  